<template>
  <!-- 模板内容：只能有一个div  -->
  <div class="left">
    <div class="left_content">
      <!-- 左侧内容第一部分 -->
      <div>
        <ul>
          <li>
            <a href=""><i class="i1"></i><span>家常菜</span></a>
          </li>
           <li>
            <a href=""><i class="i2"></i><span>快手菜</span></a>
          </li>
          <li>
            <a href=""><i class="i3"></i><span>下饭菜</span></a>
          </li>
          <li>
            <a href=""><i class="i4"></i><span>早餐</span></a>
          </li>
          <li>
            <a href=""><i class="i5"></i><span>肉</span></a>
          </li>
           <li>
            <a href=""><i class="i6"></i><span>鱼</span></a>
          </li>
          <li>
            <a href=""><i class="i7"></i><span>蔬菜</span></a>
          </li>
          <li>
            <a href=""><i class="i8"></i><span>鸡蛋</span></a>
          </li>
          <li>
            <a href=""><i class="i9"></i><span>汤羹</span></a>
          </li>
           <li>
            <a href=""><i class="i10"></i><span>烘焙</span></a>
          </li>
          <li>
            <a href=""><i class="i11"></i><span>主食</span></a>
          </li>
          <li>
            <a href=""><i class="i12"></i><span>面</span></a>
          </li>
           <li>
            <a href=""><i class="i13"></i><span>素食</span></a>
          </li>
        </ul>
        <a class="a_title" href="">全部菜谱分类</a>
        <img src="https://unmc.cdn.bcebos.com/1612183148204_1371826566.png" alt="">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Left",

};
</script>

<style lang="less" scoped>
/* css样式 */
.left {
  width: 170px;
  margin: 0 auto;
  .left_content {
    width: 170px;
    // height: 500px;
    // background: olive;
    div {
        .a_title{
            color:#dd3915 ;
            margin:20px 0px;
            display: block;
        }
      ul {
        li {
          a {
              margin: 3px;
              display: block;
              display: flex;
              align-items: center;
              line-height:32px;
            .i1{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px 0px;
            }
            .i2{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -40px;
            }
             .i3{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -77px;
            }
             .i4{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -123px;
            }
             .i5{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -160px;
            }
             .i6{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -200px;
            }
             .i7{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -240px;
            }
            .i8{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -280px;
            }
             .i9{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -320px;
            }
             .i10{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -360px;
            }
             .i11{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -400px;
            }
             .i12{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -480px;
            }
            .i12{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -435px;
            }
             .i13{
              display: inline-block;
              width: 32px;
              height: 32px;
              background: url("")
                no-repeat 3px -480px;
            }
            span:hover{
                color: #dd3915;
            }
            span {
              display: inline-block;
              margin-left: 30px;
              font-size: 14px;
              color:#000;
            }
          }
        }
      }
    }
  }
}
</style>